<template>
    <div>

        <el-dialog title="选择合同模板" :visible="visible" width="1200px" append-to-body :close-on-click-modal="false" @close="handleCloseDialog">

            <el-form :model="queryParams" ref="queryParams" size="small" :inline="true">
                <el-form-item label="合同名称" prop="contractName">
                    <el-input v-model="queryParams.contractName" placeholder="请输入合同名称" clearable @keyup.enter.native="handleQuery"/>
                </el-form-item>
                <el-form-item label="适用业务" prop="suitBusiness">
                    <el-input v-model="queryParams.suitBusiness" placeholder="请输入适用业务" clearable @keyup.enter.native="handleQuery"/>
                </el-form-item>
                <el-form-item label="适用厂商" prop="suitCompany">
                    <el-input v-model="queryParams.suitCompany" placeholder="请输入适用厂商" clearable @keyup.enter.native="handleQuery"/>
                </el-form-item>
                <el-form-item label="适用群体" prop="suitGroup">
                    <el-input v-model="queryParams.suitGroup" placeholder="请输入适用群体" clearable @keyup.enter.native="handleQuery"/>
                </el-form-item>
                <el-form-item label="合同标识" prop="contractMark">
                    <el-input v-model="queryParams.contractMark" placeholder="请输入合同标识" clearable @keyup.enter.native="handleQuery"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>

            <el-table v-loading="loading" :data="dataList">
                <el-table-column label="合同模板名称" align="center" prop="contractName" :show-overflow-tooltip="true" min-width="150"/>
                <el-table-column label="适用业务" align="center" prop="suitBusiness" :show-overflow-tooltip="true" min-width="150"/>
                <el-table-column label="适用群体" align="center" prop="suitGroup" :show-overflow-tooltip="true" min-width="150"/>
                <el-table-column label="适用厂商" align="center" prop="suitCompany" :show-overflow-tooltip="true" min-width="150"/>
                <el-table-column label="合同标识" align="center" prop="contractMark" :show-overflow-tooltip="true" min-width="150"/>
                <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" min-width="150"/>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-check"
                            @click="handleSelect(scope.row)"
                            >选择
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="handleQuery"
            />
            
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: 'selectTemplete',
    props: {
        visible: {
            type: Boolean,
            required: true,
            default: false
        },
    },

    data() {
        return {
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                contractName: undefined,
                suitBusiness: undefined,
                suitCompany: undefined,
                suitGroup: undefined,
                contractMark: undefined,
            },
            loading: false,
            // 总条数
            total: 0,
            dataList: [],

        }
    },

    methods: {
        getList() {
            
        },
        
        // 关闭弹窗
        handleCloseDialog() {
            // Object.assign(this.$data, this.$options.data());
            this.$emit('update:visible', false);
            
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryParams')
            this.handleQuery()
        },

        // 选择合同模板
        handleSelect(row) {
            this.$emit('update:visible', false);
            this.$emit('getTempleteData')
        }


    },

}
</script>